<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <h2>多选按钮</h2>
    <p>
      <el-checkbox v-model="bool">勾选协议</el-checkbox>
    </p>
    <p>
      <el-button type="success" :disabled="!bool" @click="btn">立即注册</el-button>
    </p>
    <div>
      <el-checkbox-group v-model="checkboxGroup1">
        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div style="margin-top: 20px">
      <el-checkbox-group v-model="checkboxGroup2" size="medium">
        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div style="margin-top: 20px">
      <el-checkbox-group v-model="checkboxGroup3" size="small">
        <el-checkbox-button
          v-for="city in cities"
          :label="city"
          :disabled="city === '北京'" 
          :key="city"
        >{{city}}</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div style="margin-top: 20px">
      <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <h2>单选框</h2>
    <p>{{ radio }}</p>
    <el-radio v-model="radio" label="0">备选项</el-radio>
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio disabled v-model="radio" label="2">备选项</el-radio>
    <el-radio v-model="radio" label="3">备选项</el-radio>

    <p></p>
    <el-container>
      <el-main>
        <el-row :gutter="10">
          <el-col :span="4">
            <div class="dh">左侧导航</div>
          </el-col>

          <el-col :span="11">
            <div class="lb">
              <img src="untitled.png" height="240px" width="240px" />
            </div>
            <div class="lb2">轮播图2</div>
          </el-col>

          <el-col :span="3">
            <div class="gg">广告位</div>
            <div class="gg2">广告位2</div>
          </el-col>

          <el-col :span="6">
            <div class="h1">Hi!你好</div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      checkboxGroup1: ["上海"],
      checkboxGroup2: ["上海"],
      checkboxGroup3: ["上海"],
      checkboxGroup4: ["上海"],
      cities: cityOptions,
      bool:true,
    }
  },
  methods:{
    btn(){
      alert("注册成功");
  },
  btn2() {
    this.bool = !this.bool;
  },
  abc(e){
    console.log(e);
    console.log(this.radio2);
  }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dh,
.gg,
.gg2,
.h1,
.lb,
.lb2 {
  background: red;
}
.dh {
  height: 500px;
}
.lb {
  margin-bottom: 10px;
}
.lb2 {
  height: 240px;
}

.gg {
  height: 290px;
  margin-bottom: 10px;
}

.gg2 {
  height: 200px;
}

.h1 {
  height: 500px;
}
.span {
  background: red;
  color: #fff;
}

h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>